import React, { Component } from 'react'
import './Tarbar.less';
import {withRouter} from 'react-router-dom'
class Tarbar extends Component {
  handelClick(path){
    this.props.history.push(path)
  }
  getIcon=(path)=>{
    switch(path){
      case '/home':
      return <span className="icon">&#xe622;</span>;
      case '/menu':
      return <span className="icon">&#xe638;</span>;
      case '/order':
      return <span className="icon">&#xe6df;</span>;
      case '/cart':
      return <span className="icon">&#xe618;</span>;
      case '/mine':
      return <span className="icon">&#xe636;</span>;
      default:
       break;
    }
  }
  render() {
    
    
    return (
      <nav className="nav_table">
      {
        this.props.routes.map((route)=>{
          return (
            <div 
            onClick={this.handelClick.bind(this,route.path)}
            key={route.path} className="nav_table_menu active" >
            {this.getIcon(route.path)}
          
          <span className="text">{route.title}</span>
        </div>
          )
        })
      }
        
        
      </nav>
    )
  }
}
export default withRouter(Tarbar);